<!DOCTYPE html>
<html>
	<head>
		<style>
			#drag-zone {
				list-style: none;
				float: left; 
			}
			#drag-zone li * {
				border: 4px solid #888;
				display: block;
				margin: 10px 0;
			}
			#drag-zone, #drop-zone, #drop-data { 
				width: 20%;
			}
			#drop-zone, #drop-data {
				padding: 40px;
				border: 5px solid #888;
				float: right;
				height: 240px;
				overflow: auto;
			}
			#drop-zone.hovering {
				border: 5px solid #aaa;
				background-color: rgba(255, 0, 0, 0.199219);
			}
			#drop-data { 
				background-color: #eee;
				font-family: Monospace;
				-ms-word-wrap: break-word;
				word-wrap: break-word;
			}
			.datatypes {
				font-weight: bold;
			}
			.draggable-text {
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="dnd-example"> 
			<ol id="drag-zone"> 
				<li><img src="http://playground.html5rocks.com/samples/html5_misc/dnd.png" draggable class="copy" /></li> 
				<li>
					<span class="draggable-text" draggable>Select text and drag (original text will be dropped)</span>
				</li> 
				<li>
					<span class="overwrite" class="draggable-text" draggable >
						Select text and drag (dragged text data will be altered from original)
					</span>
				</li> 
			</ol> 
			<div id="drop-data">Source Data</div> 
			<div id="drop-zone">Drop Area</div> 
		</div>
		<script type="text/javascript" src="js/draganddrop.js"></script>
	</body>
</html>​